<template>
  <div>
    <!-- 控制选项 -->
    <div class="form-group form-group-lg panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">控制选项</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label><input type="checkbox" v-model="editable" />开启拖动</label>
        </div>
        <el-radio-group v-model="direction">
          <el-radio label="ltr">详情面板从左往右开</el-radio>
          <el-radio label="rtl">详情面板从右往左开</el-radio>
          <el-radio label="ttb">详情面板从上往下开</el-radio>
          <el-radio label="btt">详情面板从下往上开</el-radio>
        </el-radio-group>
        <a class="btn btn-default btn-block" role="button" @click="addPool"
          ><b>新增池子</b></a>
        <a class="btn btn-danger btn-block" role="button" @click="logout"
          ><b>退出系统</b></a>
      </div>
    </div>

    <!-- 根容器：装着所有池子 -->
    <div class="container-fluid">
      <div class="row">
        <pool
          @poolClick="poolBtnClick"
          @swap="swapTask"
          @addTask="addT"
          @deleteTask1="deleteT"
          @poolDetail="showPoolDetail"
          @removePool="deletePool"
          v-for="pool in pools"
          :title="pool.poolName"
          :boards="pool.boards"
          :editable="editable"
          :color="pool.color"
          :pool="pool"
          :key="pool"
        ></pool>
      </div>
    </div>

    <!-- 任务修改/新增面板 -->
    <el-drawer
      :title="drawer.drawerTitle"
      :visible.sync="drawer.drawerOpen"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form ref="drawer" :model="drawer" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="drawer.drawerTitle"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="drawer.drawerPriority" placeholder="请选择优先级">
            <el-option label="高" value="高"></el-option>
            <el-option label="中" value="中"></el-option>
            <el-option label="低" value="低"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="drawer.drawerStartYear"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="drawer.drawerStartTime"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="drawer.drawerDeadLineYear"
              style="width: 100%;"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker
              placeholder="选择时间"
              v-model="drawer.drawerDeadLineTime"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input
            type="textarea"
            v-model="drawer.drawerTaskDescript"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 池子修改/新增面板 -->
    <el-drawer
      :title="drawerPool.drawerTitle"
      :visible.sync="drawerPool.drawerOpen"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-form ref="drawerPool" :model="drawerPool" label-width="80px">
        <el-form-item label="池子名称">
          <el-input v-model="drawerPool.drawerTitle"></el-input>
        </el-form-item>
        <el-form-item label="池子颜色">
          <el-select v-model="drawerPool.drawerColor" placeholder="请选择颜色">
            <el-option label="颜色1" value="panel-default">
              <div
                style="width: 50px; height: 25px; margin: 0 auto; background-color: #f5f5f5; font-size: 13px"
              ></div>
            </el-option>
            <el-option label="颜色2" value="panel-primary">
              <div
                style="width: 50px; height: 25px; margin: 0 auto; background-color: #337ab7; font-size: 13px"
              ></div>
            </el-option>
            <el-option label="颜色3" value="panel-info">
              <div
                style="width: 50px; height: 25px; margin: 0 auto; background-color: #d9edf7; font-size: 13px"
              ></div>
            </el-option>
            <el-option label="颜色4" value="panel-warning">
              <div
                style="width: 50px; height: 25px; margin: 0 auto; background-color: #fcf8e3; font-size: 13px"
              ></div>
            </el-option>
            <el-option label="颜色5" value="panel-danger">
              <div
                style="width: 50px; height: 25px; margin: 0 auto; background-color: #f2dede; font-size: 13px"
              ></div>
            </el-option>
            <el-option label="颜色6" value="panel-success">
              <div
                style="width: 50px; height: 25px; margin: 0 auto; background-color: #dff0d8; font-size: 13px"
              ></div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitPool">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- <div class="list-group col-md-2">
      <pre>{{ listString }}</pre>
    </div> -->
  </div>
</template>

<script>
import pool from "../components/Pool";
import { clearLoginInfo } from '@/utils';

export default {
  name: "hello",
  components: {
    pool
  },
  data() {
    return {
      pools: [],
      editable: true,
      drawer: {
        pId: 0,
        taskId: 0,
        drawerOpen: false,
        drawerTitle: "",
        drawerPriority: "",
        drawerStartYear: "",
        drawerDeadLineYear: "",
        drawerStartTime: new Date(),
        drawerDeadLineTime: new Date(),
        drawerTaskDescript: ""
      },
      direction: "rtl",
      isAdd: false,
      drawerPool: {
        drawerOpen: false,
        drawerTitle: "",
        drawerColor: "",
        poolId: 0
      },
      isAddPool: false
    };
  },
  methods: {
    // 退出系统
    logout() {
      clearLoginInfo();
      this.$router.push('/login');
    },
    // 发送网络请求获取数据
    getData() {
      this.$http({
        url: this.$http.adornUrl("/crud/data"),
        method: "get"
      }).then(({ data }) => {
        this.pools = data.data.map(pool => {
          let newPool = {
            poolId: pool.poolId,
            poolName: pool.poolName,
            color: pool.color,
            boards: []
          };
          newPool.boards = pool.boards.map(board => {
            let newBoard = {
              // pId: board.pId, 前后端bug??? pId 变成了 pid
              pId: board.pid,
              taskId: board.taskId,
              taskTitle: board.taskTitle,
              priority: board.priority,
              order: board.order,
              deadLineYear: board.deadLineYear,
              deadLineTime: new Date(board.deadLineTime),
              startYear: board.startYear,
              startTime: new Date(board.startTime),
              descript: board.descript
            };
            return newBoard;
          });
          return newPool;
        });
      });
    },
    // 任务/池子面板关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done(_);
        })
        .catch(_ => {
          _ = "1";
        });
    },
    // 任务面板提交
    onSubmit() {
      // console.log(this.isAdd ? "添加任务" : "修改任务");
      // console.log("drawer", this.drawer);
      if (this.isAdd) {
        // 添加任务网络请求
        this.$http({
          url: this.$http.adornUrl("/crud/addTask"),
          method: "post",
          data: this.$http.adornData({
            pdd: this.drawer.pId,
            drawerTitle: this.drawer.drawerTitle,
            drawerPriority: this.drawer.drawerPriority,
            drawerDeadLineYear: this.drawer.drawerDeadLineYear,
            drawerStartYear: this.drawer.drawerStartYear,
            // 防止空指针，用户有可能没选时间
            drawerDeadLineTime: this.drawer.drawerDeadLineTime != null ? 
            this.drawer.drawerDeadLineTime.getTime() : new Date(),
            drawerStartTime: this.drawer.drawerStartTime != null ?
            this.drawer.drawerStartTime.getTime() : new Date(),
            drawerTaskDescript: this.drawer.drawerTaskDescript
          })
        })
          .then(({ data }) => {
            // console.log("添加任务返回结果", data);
            this.$message({
              message: "添加任务成功",
              type: "success"
            });
            // 刷新出新的数据
            this.getData();
            // 关闭池子面板
            this.drawer.drawerOpen = false;
          })
          .catch(() => {});
      } else {
        // 修改任务网络请求
        this.$http({
          url: this.$http.adornUrl("/crud/updateTask"),
          method: "post",
          data: this.$http.adornData({
            pdd: this.drawer.pId,
            taskId: this.drawer.taskId,
            drawerTitle: this.drawer.drawerTitle,
            drawerPriority: this.drawer.drawerPriority,
            drawerDeadLineYear: this.drawer.drawerDeadLineYear,
            drawerStartYear: this.drawer.drawerStartYear,
            drawerStartTime: this.drawer.drawerStartTime.getTime(),
            drawerDeadLineTime: this.drawer.drawerDeadLineTime.getTime(),
            drawerTaskDescript: this.drawer.drawerTaskDescript
          })
        })
          .then(({ data }) => {
            // console.log("修改任务返回结果", data);
            this.$message({
              message: "修改任务成功",
              type: "success"
            });
            // 刷新出新的数据
            this.getData();
            // 关闭池子面板
            this.drawer.drawerOpen = false;
          })
          .catch(() => {});
      }
    },
    // 查看详情面板
    poolBtnClick(element) {
      this.drawer.pId = element.pId;
      this.drawer.taskId = element.taskId;
      this.drawer.drawerOpen = true;
      this.drawer.drawerTitle = element.name;
      this.drawer.drawerPriority = element.priority;
      this.drawer.drawerDeadLineYear = element.deadLineYear;
      this.drawer.drawerDeadLineTime = element.deadLineTime;
      this.drawer.drawerStartYear = element.startYear;
      this.drawer.drawerStartTime = element.startTime;
      this.drawer.drawerTaskDescript = element.descript;
      this.isAdd = false;
    },
    // 任务面板位置交换持久化
    swapTask(drag, relate) {
      // 网络请求, 当任务不属于同一个池子时才交换
      if (drag.pId != relate.pId) {
        this.$http({
          url: this.$http.adornUrl("/crud/swapTask"),
          method: "post",
          data: this.$http.adornData({
            dragId: drag.taskId,
            dragPid: drag.pId,
            dropPid: relate.pId
          })
        })
          .then(({ data }) => {
            // console.log("任务位置交换返回结果", data);
            this.$message({
              message: "任务位置交换",
              type: "success"
            });
          })
          .catch(() => {});
      }
    },
    // 添加任务面板
    addT(poolId) {
      // console.log("添加任务的池子id", poolId);
      this.isAdd = true;
      this.drawer.pId = poolId;
      this.drawer.drawerTitle = "";
      this.drawer.drawerPriority = "";
      this.drawer.drawerStartYear = "";
      this.drawer.drawerDeadLineYear = "";
      this.drawer.drawerStartTime = null;
      this.drawer.drawerDeadLineTime = null;
      this.drawer.drawerTaskDescript = "";
      this.drawer.drawerOpen = true;
    },
    // 删除任务
    deleteT(element) {
      // console.log("删除任务对象", element);
      // 网络请求
      this.$http({
        url: this.$http.adornUrl("/crud/deleteTask"),
        method: "post",
        data: this.$http.adornData({
          pdd: element.pId,
          taskId: element.taskId
        })
      })
        .then(({ data }) => {
          // console.log("删除任务返回结果", data);
          this.$message({
            message: "删除任务成功",
            type: "success"
          });
          // 刷新出新的数据
          this.getData();
          // 关闭池子面板
          this.drawer.drawerOpen = false;
        })
        .catch(() => {});
    },
    // 新增池子面板
    addPool() {
      this.isAddPool = true;
      this.drawerPool.drawerTitle = "";
      this.drawerPool.drawerColor = "";
      this.drawerPool.drawerOpen = true;
    },
    // 修改池子面板
    showPoolDetail(pool) {
      this.isAddPool = false;
      this.drawerPool.drawerTitle = pool.poolName;
      this.drawerPool.drawerColor = pool.color;
      this.drawerPool.drawerOpen = true;
      this.drawerPool.poolId = pool.poolId;
    },
    // 池子面板提交
    onSubmitPool() {
      // console.log(this.isAddPool ? "新增池子" : "修改池子");
      if (this.isAddPool) {
        // 新增池子网络请求
        this.$http({
          url: this.$http.adornUrl("/crud/addPool"),
          method: "post",
          data: this.$http.adornData({
            drawerTitle: this.drawerPool.drawerTitle,
            drawerColor: this.drawerPool.drawerColor
          })
        })
          .then(({ data }) => {
            // console.log("新增池子返回结果", data);
            this.$message({
              message: "新增池子成功",
              type: "success"
            });
            // 刷新出新的数据
            this.getData();
            // 关闭池子面板
            this.drawerPool.drawerOpen = false;
          })
          .catch(() => {});
      } else {
        // 修改池子网络请求
        this.$http({
          url: this.$http.adornUrl("/crud/updatePool"),
          method: "post",
          data: this.$http.adornData({
            poolId: this.drawerPool.poolId,
            drawerTitle: this.drawerPool.drawerTitle,
            drawerColor: this.drawerPool.drawerColor
          })
        })
          .then(({ data }) => {
            // console.log("修改池子返回结果", data);
            this.$message({
              message: "修改池子成功",
              type: "success"
            });
            // 刷新出新的数据
            this.getData();
            // 关闭池子面板
            this.drawerPool.drawerOpen = false;
          })
          .catch(() => {});
      }
    },
    // 移除池子
    deletePool(pool) {
      // console.log("删除池子对象", pool);
      // 网络请求
      this.$http({
        url: this.$http.adornUrl("/crud/removePool"),
        method: "post",
        data: this.$http.adornData({
          poolId: pool.poolId
        })
      })
        .then(({ data }) => {
          // console.log("移除池子返回结果", data);
          this.$message({
            message: "移除池子成功",
            type: "success"
          });
          // 刷新出新的数据
          this.getData();
          // 关闭池子面板
          this.drawerPool.drawerOpen = false;
        })
        .catch(() => {});
    },
    beforeunloadFn(e) {
      // console.log('刷新或关闭')
      this.getData();
    }
  },
  computed: {
    // listString() {
    //   return JSON.stringify(this.list, null, 2);
    // }
  },
  watch: {
    "$route" : "getData" 
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 创建完成后请求数据
    this.getData();
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e));
  }
};
</script>

<style>
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}
</style>
